<template>
  <div class="app-container">
    <el-button @click="addTest">新增数据</el-button>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="测试名称">
        <template slot-scope="scope">
          {{ scope.row.testName }}
        </template>
      </el-table-column>
      <el-table-column label="测试类型" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.testLabel }}</span>
        </template>
      </el-table-column>
      <el-table-column label="测试数量" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.testNumber }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getTest, postTest, updateTest, deleteTest } from "@/api/test";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      list: null,
      listLoading: true,
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      getTest().then((response) => {
        this.list = response.data;
        this.listLoading = false;
      });
    },
    addTest() {
      postTest({
        testName: "接口数据",
        testLabel: "数据",
        testNumber: 123,
      }).then((response) => {
        console.log(response);
        this.fetchData();
      });
    },
  },
};
</script>
